<!-- @format -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.box {
				width: 200px;
				height: 200px;
				color: #333;
			}

			.active {
				color: red;
				background-color: pink;
			}
			.big {
				font-size: 100px;
			}
		</style>
	</head>

	<body>
		用户名：<input type="text" value="张三" /> <br />
		密码： <input type="password" value="666" /> <br />
		性别： <input type="radio" name="sex" id="F" value="男" />男
		<input type="radio" name="sex" id="M" value="女" checked />女 <br />
		爱好： 唱歌
		<input type="checkbox" name="hobby" id="" value="唱歌" /> 跳舞
		<input type="checkbox" name="hobby" id="" value="跳舞" checked /><br />
		班级：
		<select name="classname" id="">
			<option value="1班">1班</option>
			<option value="2班">2班</option>
			<option value="3班">3班</option>
			<option value="4班">4班</option>
		</select>
		<br />
		<button>点击</button>
		<script>
			// 1. 文本输入框 值和类型
			const usernameInput = document.querySelector("input[type='text']");
			usernameInput.value = "123123";

			// 2. 密码输入框
			const passwordInput = document.querySelector(
				"input[type='password']"
			);
			passwordInput.type = "text";

			// 3. 单选框
			// 3.1 checked属性 修改选中状态
			const radioInput = document.querySelector("input[type='radio']");
			radioInput.checked = true;
			// 3.2 那如何获取选中状态的对象
			let checked = document.querySelector("input[type=radio]:checked");
			console.log(checked.value);

			// 4. 复选框
			const checkboxInput = document.querySelector(
				"input[type='checkbox']"
			);
			checkboxInput.checked = true;

			// 5. 下拉框
			const selectInput = document.querySelector("select");
			selectInput[3].selected = true;

			// 6. 按钮 禁用与启用
			const btn = document.querySelector("button");
			btn.disabled = true;
		</script>
	</body>
</html>
